<template>
    <div class="panel-tab__content">
        <el-checkbox-group v-model="checkList" @change="handleCheckedChange">
            <el-checkbox :label="1">站内信</el-checkbox>
            <el-checkbox :label="2">邮件</el-checkbox>
            <el-checkbox :label="3">短信</el-checkbox>
        </el-checkbox-group>
    </div>
</template>
<script>
import { createListenerObject, updateElementExtensions } from "../../utils";
export default {
    name: 'ElementButtonConfig',
    props: {
        businessObject: Object,
        id: String,
        type: String
    },
    inject: {
        prefix: "prefix",
        width: "width"
    },
    data() {
        return {
            listenerForm: {
                delegateExpression: "${taskCompleteMessageListener}",
                event: "assignment",
                fields: [],
                listenerType: "delegateExpressionListener",
                category: 'way'
            },
            checkList: [],
            correspondence: [{id: 1,name: '站内信',fieldType: 'string',string: '1'},{id: 2,name: '邮件',fieldType: 'string',string: '2'},{id: 3,name: '短信',fieldType: 'string',string: '3'}]
        }
    },
    watch: {
         id: {
            immediate: true,
            handler(val) {
                val && val.length && this.resetListenersList();
            }
        }
    },
    methods: {
        resetListenersList() {
            this.bpmnElement = window.bpmnInstances.bpmnElement;
            this.otherExtensionList = [];
            this.bpmnElementListeners = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:TaskListener`) ?? [];
            let fieldList = [],checked=[];
            this.bpmnElementListeners && this.bpmnElementListeners.map((_) => {
                if(_.hasOwnProperty('category')){
                    if(_.category == 'way'){
                        fieldList=_.fields
                    }
                }
            })
            if(fieldList?.length > 0){
                fieldList.map((item)=> {
                    this.correspondence.map((value) => {
                        if(value.string == item.string){
                            checked.push(Number(value.string))
                        }
                    })
                })
            }
            this.checkList = checked
        },
        handleCheckedChange(val) {
            let arr = [];
            let listenerObject ;
            if(val.length > 0 ){
                 val.map((item)=> {
                    this.correspondence.map((value) => {
                        if(value.id == item){
                            arr.push(value)
                        }
                    })
                    
                })
              this.listenerForm.fields = arr
            }else{
                this.$set(this.listenerForm, "fields", []);
            }
           
            listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
            const otherElementListener = this.bpmnElementListeners.filter((_) =>  _.category != 'way')
            otherElementListener.push(listenerObject);
            // 保存其他配置
            this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:TaskListener`) ?? [];
            updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(otherElementListener));
        },
    },

}
</script>